import React, { useContext, useState } from 'react';
import cs from 'classnames';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import styles from './style/index.module.less';
import { Grid, Skeleton, Space, Typography } from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import { ViolationDetails } from '@/api/interface/violation';
import RecordFromMobile from './recordFromMobile';
import RecordFromEid from './recordFromEid';
import RecordFromEmail from './recordFromEmail';
const { Row, Col } = Grid;
function Personal({
  details,
  loading,
}: {
  details: ViolationDetails;
  loading: boolean;
}) {
  const { rtl, lang } = useContext(GlobalContext);

  const t = useLocale(locale);

  const [visible, setVisible] = useState<boolean>(false);
  const [visibleEid, setVisibleEid] = useState<boolean>(false);
  const [visibleEmail, setVisibleEmail] = useState<boolean>(false);

  function dynamicFormat(input) {
    if (!input) {
      return '';
    }
    const inputArr = input
      .replace(/-/g, '')
      .replace(/[^0-9 ]+/, '')
      .split('');
    const split = [
      [0, 3],
      [3, 7],
      [7, 14],
      [14, 15],
    ];
    const result = [];
    for (let i = 0; i < split.length; i++) {
      const text = inputArr.slice(split[i][0], split[i][1]).join('');
      if (text) {
        result.push(inputArr.slice(split[i][0], split[i][1]).join(''));
      }
    }
    return result.join('-');
  }

  return (
    <div className={cs(styles['block'], rtl ? 'rtl' : '')}>
      <RecordFromMobile
        fullName={details.fullName}
        mobile={details.mobile}
        visible={visible}
        onVisible={(e) => {
          setVisible(e);
        }}
      />

      <RecordFromEid
        eid={details.eid}
        visible={visibleEid}
        onVisible={(e) => {
          setVisibleEid(e);
        }}
      />

      <RecordFromEmail
        email={details.email}
        visible={visibleEmail}
        onVisible={(e) => {
          setVisibleEmail(e);
        }}
      />

      <div className={styles['block-title']}>{t['personal.personal']}</div>
      <Skeleton
        loading={loading}
        text={{ width: '100%', rows: 3 }}
        image={{ shape: 'circle' }}
        animation
      >
        <Row gutter={24}>
          <Col span={8}>
            <Space className={cs(styles['block-col'], rtl ? '' : '')}>
              <span className={styles['name']}>{t['personal.fullName']}</span>
              <span className={styles['value']}>{details?.fullName}</span>
            </Space>
          </Col>
          <Col span={8}>
            <Space className={cs(styles['block-col'], rtl ? '' : '')}>
              <span className={styles['name']}>
                {t['personal.nationality']}
              </span>
              <span className={styles['value']}>
                {details.nationality
                  ? details.nationality.value[lang === 'en-US' ? 'en' : 'ar']
                  : '--'}
              </span>
            </Space>
          </Col>
          <Col span={8}>
            <Space className={cs(styles['block-col'], rtl ? '' : '')}>
              <span className={styles['name']}>{t['personal.type']}</span>
              <span className={styles['value']}>
                {details.complainantRole &&
                  details.complainantRole.value[lang === 'en-US' ? 'en' : 'ar']}
              </span>
            </Space>
          </Col>
          <Col span={8}>
            <Space className={cs(styles['block-col'], rtl ? '' : '')}>
              <span className={styles['name']}>{t['personal.email']}</span>
              <span className={styles['value']}>{details?.email || '--'}</span>
              {details?.emailCount >= 2 && (
                <span style={{ color: '#44C5E4' }}>
                  (
                  <Typography.Text
                    underline
                    className={styles['other']}
                    style={{ color: '#44C5E4' }}
                    onClick={() => {
                      if (details?.emailCount !== 0) {
                        setVisibleEmail(true);
                      }
                    }}
                  >
                    {details?.emailCount}
                  </Typography.Text>
                  )
                </span>
              )}
            </Space>
          </Col>
          <Col span={8}>
            <Space className={cs(styles['block-col'], rtl ? '' : '')}>
              <span className={styles['name']}>
                {t['personal.mobileNumber']}
              </span>
              <span className={styles['value']}>{details?.mobile}</span>
              {details?.mobileCount >= 2 && (
                <span style={{ color: '#44C5E4' }}>
                  (
                  <Typography.Text
                    underline
                    className={styles['other']}
                    style={{ color: '#44C5E4' }}
                    onClick={() => {
                      if (details?.mobileCount !== 0) {
                        setVisible(true);
                      }
                    }}
                  >
                    {details?.mobileCount}
                  </Typography.Text>
                  )
                </span>
              )}
            </Space>
          </Col>
          <Col span={8}>
            <Space className={cs(styles['block-col'], rtl ? '' : '')}>
              <span className={styles['name']}>{t['personal.eid']}</span>
              <span className={styles['value']}>
                {dynamicFormat(details?.eid) || '--'}
              </span>
              {details?.eidCount >= 2 && (
                <span style={{ color: '#44C5E4' }}>
                  (
                  <Typography.Text
                    underline
                    className={styles['other']}
                    style={{ color: '#44C5E4' }}
                    onClick={() => {
                      if (details?.eidCount !== 0) {
                        setVisible(true);
                      }
                    }}
                  >
                    {details?.eidCount}
                  </Typography.Text>
                  )
                </span>
              )}
            </Space>
          </Col>
          <Col span={8}>
            <Space className={cs(styles['block-col'], rtl ? '' : '')}>
              <span className={styles['name']}>
                {t['personal.UnifiedNumber']}
              </span>
              <span className={styles['value']}>
                {details?.unifiedNumber || '--'}
              </span>
            </Space>
          </Col>
        </Row>
      </Skeleton>
    </div>
  );
}

export default Personal;
